// 1. ------------------------- 获取数据并渲染 ----------------------
function renderCategory() {
  $.ajax({
    url: '/my/category/list',
    success: function (res) {
      if (res.status === 0) {
        let str = '';
        res.data.forEach(item => {
          str += `
          <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
              <button type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
          `;
        });
        // 循环之后，把拼接好的所有，放到tbody中
        $('tbody').html(str);
      }
    }
  });
}
renderCategory();


// 2. ---------------------------- 添加类别 ------------------------
// 2.1)点击添加类别，出现弹层
let addIndex;
$('button:contains("添加类别")').on('click', function () {
  addIndex = layer.open({
    // 弹出层的配置项，去目录中基础参数找
    type: 1,
    title: '添加类别',
    content: $('#tpl-add').html(),
    area: ['500px', '250px']
  });
})


// 2.2)表单提交 -- 阻止默认行为 -- 收集数据 -- ajax提交
$('body').on('submit', '#add-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  $.ajax({
    type: 'POST',
    url: '/my/category/add',
    data: data,
    success: function (res) {
      layer.msg(res.message);
      if (res.status === 0) {
        renderCategory(); // 调用函数，更新页面数据
        layer.close(addIndex); // 关闭弹出层
      }
    }
  });
})


// 3. ---------------------------- 修改类别 ------------------------
// 复制添加的代码，补充数据回填
// 2.1)点击 编辑 按钮，出现弹层
let editIndex;
$('tbody').on('click', 'button:contains("编辑")', function () {
  // 获取数据
  let shuju = $(this).data(); // 不填参数，表示获取全部的 data-xxx 属性值
  // console.log(shuju); // {alias: "music", name: "音乐", id: 2}
  editIndex = layer.open({
    // 弹出层的配置项，去目录中基础参数找
    type: 1,
    title: '编辑类别',
    content: $('#tpl-edit').html(),
    area: ['500px', '250px'],
    // 弹出出现之后，设置弹出中的表单的默认值
    success: function () {
      let form = layui.form;
      form.val('edit', shuju);
    }
  });
})


// 2.2)表单提交 -- 阻止默认行为 -- 收集数据 -- ajax提交
$('body').on('submit', '#edit-form', function (e) {
  e.preventDefault();
  let data = $(this).serialize();
  $.ajax({
    type: 'POST',
    url: '/my/category/update',
    data: data,
    success: function (res) {
      layer.msg(res.message);
      if (res.status === 0) {
        renderCategory(); // 调用函数，更新页面数据
        layer.close(editIndex); // 关闭弹出层
      }
    }
  });
})


// 4. ---------------------------- 删除类别 ------------------------